<template>
	<div class="gis_wrap" >
	<el-row class="GIS-container" v-loading="loading">
		<div class="ele_1">
			<span>I类</span>
			<span>II类</span>
			<span>III类</span>
			<span>IV类</span>
			<span>V类</span>
			<span>劣V类</span>
			<span>断线</span>
		</div>
		<div class="ele_2">			
			<table>
				<tr>
					<th>站点名称</th>
					<th>水质类别</th>
				</tr>
				<tr v-for="item in siteWqiList2" :key="item.value" v-if="showTabel">
					<td>{{item.siteName}}</td>
					<td>
						<span v-if="item.wqiDayLevel=='1'" style="background:#C5FFFF" class="item_cir"></span>
						<span v-if="item.wqiDayLevel=='2'" style="background:#34C3F6" class="item_cir"></span>
						<span v-if="item.wqiDayLevel=='3'" style="background:#03FF03" class="item_cir"></span>
						<span v-if="item.wqiDayLevel=='4'" style="background:#FAFF19" class="item_cir"></span>
						<span v-if="item.wqiDayLevel=='5'" style="background:#FF9000" class="item_cir"></span>
						<span v-if="item.wqiDayLevel=='6'" style="background:#FF0000" class="item_cir"></span> 
						{{item.wqiDayLevelName}}
					</td>
				</tr>
			</table>
		</div>
		<baidu-map ref="map" class="map" :center="center" @ready="handler"
			:zoom="zoom" @zoomend="zoomEnd" :scroll-wheel-zoom="true" :map-click="false" @moveend="moveEnd">
			<!-- 自定义控件-点位搜索 -->
			<bm-control anchor="BMAP_ANCHOR_TOP_RIGHT" :offset="{width: 40, height: 20}">
				<el-select size="medium" style="width: 250px;" filterable v-model="currentPointId">
					<el-option v-for="(item, index) in pointList" :key="index" :label="item.siteName" :value="item.siteId">
						<el-row style="font-size: 12px;padding:0 10px;">
							{{ item.siteName }}
						</el-row>
					</el-option>
				</el-select>
				<el-button icon="el-icon-search" size="medium" @click="focusPoint" type="primary" style="margin-left: 5px"></el-button>
				<div style="text-align: center;margin-top: 20px;display: flex;justify-content: center;">
					<img src="/img/system/close.png" alt="" style="display: block;" @click="showTabel=false" v-if="showTabel"/>
					<img src="/img/system/open.png" alt="" style="display: block;" @click="showTabel=true" v-else/>
				</div>
			</bm-control>
			
			<!--<!-- 缩略图控件：anchor(位置) size(大小) -->
			<bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :size="size" :isOpen="true"></bm-overview-map>


            <div v-for="(item, index) in pointList">
	            <!--<bm-marker 
	            	v-if="formatFactorList(item.factorList)&&item.factorList"
	                :key="index"
	                :icon="{url: '/img/bg/tuding3.png', size: {width: 30, height: 30}}"
	                :position="item.position" 
	                @mouseover="pointClick(item)"	               
	            ></bm-marker>
	            <bm-marker 
	            	v-else-if="!formatFactorList(item.factorList)&&item.factorList"
	                :key="index"
	                :icon="{url: '/img/bg/tuding/icon6.png', size: {width: 30, height: 30}}"
	                :position="item.position" 
	                @mouseover="pointClick(item)"	               
	            ></bm-marker>	            -->
                <bm-marker 
	            	v-if="item.factorList&&item.wqiDayLevel==1&&item.stateCode==1"
	                :key="index"
	                :icon="{url: '/img/bg/tuding/icon1.png', size: {width: 30, height: 30}}"
	                :position="item.position" 
	                @mouseover="pointClick(item)"	               
	            ></bm-marker>	            
                <bm-marker 
	            	v-else-if="item.factorList&&item.wqiDayLevel==2&&item.stateCode==1"
	                :key="index"
	                :icon="{url: '/img/bg/tuding/icon2.png', size: {width: 30, height: 30}}"
	                :position="item.position" 
	                @mouseover="pointClick(item)"	               
	            ></bm-marker>	
                <bm-marker 
	            	v-else-if="item.factorList&&item.wqiDayLevel==3&&item.stateCode==1"
	                :key="index"
	                :icon="{url: '/img/bg/tuding/icon3.png', size: {width: 30, height: 30}}"
	                :position="item.position" 
	                @mouseover="pointClick(item)"	               
	            ></bm-marker>	
                <bm-marker 
	            	v-else-if="item.factorList&&item.wqiDayLevel==4&&item.stateCode==1"
	                :key="index"
	                :icon="{url: '/img/bg/tuding/icon4.png', size: {width: 30, height: 30}}"
	                :position="item.position" 
	                @mouseover="pointClick(item)"	               
	            ></bm-marker>		            
                <bm-marker 
	            	v-else-if="item.factorList&&item.wqiDayLevel==5&&item.stateCode==1"
	                :key="index"
	                :icon="{url: '/img/bg/tuding/icon5.png', size: {width: 30, height: 30}}"
	                :position="item.position" 
	                @mouseover="pointClick(item)"	               
	            ></bm-marker>	
                <bm-marker 
	            	v-else-if="item.factorList&&item.wqiDayLevel==6&&item.stateCode==1"
	                :key="index"
	                :icon="{url: '/img/bg/tuding/icon6.png', size: {width: 30, height: 30}}"
	                :position="item.position" 
	                @mouseover="pointClick(item)"	               
	            ></bm-marker>	
                <bm-marker 
	            	v-else-if="item.stateCode==2"
	                :key="index"
	                :icon="{url: '/img/bg/tuding/icon7.png', size: {width: 30, height: 30}}"
	                :position="item.position" 
	                @mouseover="pointClick(item)"              
	            ></bm-marker>		            
	            
	            
            </div>
			<!-- 信息窗体 -->
			<bm-info-window :position="infoData.position" :title="infoData.siteName+'-'+infoData.deviceName+' (状态:'+infoData.state+')'" 
				:show="infoShow" 
				 :closeOnClick="false" @clickclose="withInfoClose">
	              <div class="info-main-right" style="width:410px;margin-top: 10px;" @click="toHistory">              	
	                <div class="right" >
	                  <div class="right-inner" v-for="(item, index) in infoData.factorList" :key="index">
	                    <div class="factor-title">
	                    	<span>{{ item.alias }}</span>
	                    	<span v-if="item.unit">({{ item.unit }})</span>	                    	
	                    </div>
	                    <div class="factor-txt">
							<span v-if="item.isAbnormal>0" style="color: #FF0000;">{{ item.collectValue || '-' }}</span>
                            <span v-else>{{ item.collectValue || '-' }}</span>	                    	
	                    </div>
	                  </div>
	                </div>
	              </div>				
			</bm-info-window>
		</baidu-map>
		<!-- 视频弹框 -->
		<!--<el-dialog :visible.sync="videoVisible" :modal="false" :title="dialogTitle" width="65%">
			<div class="dialog-content">
				<video class="dialog-video" ref="dialogVideo" src="./videos/water.mp4" :controls="false" autoplay loop muted></video>
			</div>
		</el-dialog>-->
		<!-- 数字统计 -->
		<div class="overlay_top" v-if="false">
			<div class="count_wrapper">
				<div class="count_item">
					<div class="count_label">I类</div>
					<div class="count_value">
						<div class="number_cell">0</div>
						<div class="number_cell">0</div>
						<div class="number_cell">0</div>
					</div>
				</div>
				<div class="count_item">
					<div class="count_label">II类</div>
					<div class="count_value">
						<div class="number_cell">0</div>
						<div class="number_cell">0</div>
						<div class="number_cell">0</div>
					</div>
				</div>
				<div class="count_item">
					<div class="count_label">III类</div>
					<div class="count_value">
						<div class="number_cell">0</div>
						<div class="number_cell">0</div>
						<div class="number_cell">0</div>
					</div>
				</div>
				<div class="count_item">
					<div class="count_label">IV类</div>
					<div class="count_value">
						<div class="number_cell">0</div>
						<div class="number_cell">0</div>
						<div class="number_cell">0</div>
					</div>
				</div>
				<div class="count_item">
					<div class="count_label">V类</div>
					<div class="count_value">
						<div class="number_cell">0</div>
						<div class="number_cell">0</div>
						<div class="number_cell">0</div>
					</div>
				</div>
			</div>
		</div>
	</el-row>
	</div>
</template>

<script>
	import { getGISData, getSiteWqi } from "@/api/swaq/gis";
	import { mapGetters } from "vuex";
	import { setStore, getStore } from '@/util/store'
	import { getSystemConfig} from "@/api/ficm/systemName";
	export default {
		data() {
			return {
				showTabel:true,
				size:{width: 300, height: 180},
				// 设置center和zoom之后地图才会进行渲染
				center: '',
				zoom: 0,
				pointList: [], // 点位数组，用于渲染到地图
				infoData: {}, //  信息窗体数据
				infoShow: false, // 信息窗体显隐
				currentPointId: null, // 当前选择的点位
				dialogTitle: null, // 弹框标题
				videoVisible: false, // 弹框显隐
				loading: false,
				siteWqiList: [],
				siteWqiList2: [],

			};
		},
		mounted() {
			
		},
		methods: {
			handler(){
				this.drawMap()
			},
			formatFactorList(arr) {
				if(arr){
					let status = true
					for(var i = 0; i < arr.length; i++) {
						if(arr[i].isAbnormal > 0) {
							status = false
							break;
						}
					}
					return status					
				}
			},
			/**
			 * 获取当前缩放比
			 */
			zoomEnd({
				target
			}) {
				this.zoom = target.getZoom()
			},
			/**
			 * 地图拖拽结束后触发
			 */
			moveEnd({
				target
			}) {
				// 重新定位中心点，解决同一个点位在拖拽后无法再次定位的问题
				this.center = target.getCenter()
			},
			/**
			 * 跳转
			 */
			toHistory() {
				this.$store.commit('SET_GISID', {
					value: this.infoData.siteId
				})
				this.$router.push({
					path: '/swaq/history/historydata'
				})
			},
			// 聚焦到选择的点位
			focusPoint() {				
				if(this.currentPointId != 'all') {
					let status=false
					this.siteWqiList2 = [];
					this.pointList.forEach(item => {
						if(item.siteId == this.currentPointId) {
							this.pointClick(item) // 打开信息窗口
							this.center = item.position // 设置中心点
							status=true
						}
					})
	                if(!status){
	                	this.center='无锡'
	                }					
					this.siteWqiList.forEach(item => {
						if(item.siteId == this.currentPointId) {
							this.siteWqiList2.push(item)
						}
					})
				} else {
					// this.$message.info('请先选择点位')
					this.withInfoClose()
					this.center = this.pointList[1].position
					this.siteWqiList2 = this.siteWqiList
				}
			},
			// 处理地图数据，绘制地图
			async drawMap() {
				let that=this							
				this.loading = true
				getSystemConfig().then(res=>{
					if(res.data.data.zoomLevel){
						this.zoom=res.data.data.zoomLevel
					}else{
						this.zoom=11
					}
				})   				
				await getSiteWqi().then(res => {
					if(res.data.success) {
						this.siteWqiList = res.data.data;
						Object.assign(this.siteWqiList2, this.siteWqiList);
					} else {
						reject('您的网络不稳定,数据重新加载中...')
					}
				})
				this.getMapData().then(resData => {
					this.pointList = []
					resData.forEach(item => {
						this.siteWqiList.forEach(item2 => {
							if(item2.siteId == item.siteId) {
								this.pointList.push({
									siteId: item.siteId,
									deptInfoId: item.deptInfoId,
									siteName: item.siteName,
									deviceName: item.deviceName,
									position: {
										lng: item.logitude,
										lat: item.latitude
									},
									state: item.state,
									factorList: item.factorList,
									wqiDayLevel: item2.wqiDayLevel,
									stateCode:item.stateCode
								})
							}
						})
					})
					this.loading = false
					// 在第一项添加 全部
					this.pointList.splice(0, 0, {
						siteName: '全部',
						siteId: 'all',
					});
					this.currentPointId = this.pointList[0].siteId
					that.focusPoint()

				}).catch(() => {
					that.loading = false
				})
			},
			/**
			 * 请求地图数据
			 */
			getMapData() {
				return new Promise((resolve, reject) => {
					getGISData().then(res => {
						if(res.data.success) {
							resolve(res.data.data)
						} else {
							reject('网络拥堵，请退出重试')
						}
					})
				})
			},
			/**
			 * 显示监控
			 */
			showVideo(point) {
				
				this.dialogTitle = point.siteName
				this.videoVisible = true
			},
			/**
			 * 点击信息窗口关闭按钮时触发
			 */
			withInfoClose() {
				// 把控制信息窗口显隐的变量置为false
				this.infoShow = false
			},
			/**
			 * 点击点位触发
			 */
			pointClick(point) {
				
				// 展示信息窗口
				this.infoData = point
				this.infoShow = true
			},
		}
	}
</script>

<style lang="scss" scoped>
    .info-main-right {
      width: 100%;
      display: flex;
      flex-direction: row;      
      .right {
      	width: 100%;
      	border-top: 1px solid #e2e6f3;
      	border-left:1px solid #e2e6f3;
      	border-radius: 4px !important;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        border-top: 1px solid #e2e6f3;
        font-size: 13px;
        background: #f1f5ff;
        .right-inner {
          display: flex;
          flex-direction: column;
          width: 33.3%;          
          .factor-title {
          	display: flex;align-items: center;justify-content: center;
            color: #929cb6;            
            border-bottom: 1px solid #e2e6f3;
            border-right: 1px solid #e2e6f3;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            padding: 10px;
            height: 52px;
            border-radius: 0 !important;
            font-size: 12px;
          }

          .factor-txt {
          	color: #18191a;
          	font-weight: bold;
            border-bottom: 1px solid #e2e6f3;
            border-right: 1px solid #e2e6f3;
            box-sizing: border-box;
            padding: 5px 0;
            height: 30px;
            text-align: center;
            border-radius: 0 !important;
          }
        }

        .right-inner:last-child {
          box-sizing: border-box;

        }

      }
    }

	.GIS-container {
		.ele_1 {
			position: absolute;
			bottom: 10px;
			left: 10px;
			z-index: 99;
			background: rgba($color: #FFF, $alpha: 0.7);
			padding: 5px 0;
			span {
				display: block;
				border-radius: 5px;
				color: #000;
				text-align: center;
				font-size: 13px;
				line-height: 20px;
				width: 40px;
				margin: 5px 10px;
			}
			span:first-child {
				background: #C5FFFF
			}
			span:nth-child(2) {
				background: #34C3F6
			}
			span:nth-child(3) {
				background: #03FF03
			}
			span:nth-child(4) {
				background: #FAFF19
			}
			span:nth-child(5) {
				background: #FF9000
			}
			span:nth-child(6) {
				background: #FF0000
			}
			span:nth-child(7) {
				background: #ddd
			}			
		}
		.ele_2 {
			position: absolute;
			right: 40px;
			top: 94px;
			z-index: 99;
			max-height: calc(100% - 290px);
			width: 310px;
			overflow: scroll;
			table {
				width: 100%;
				text-align: center;
				border: 1px solid #DCDFE6;
				font-size: 14px;
				border-bottom: none;
				background: rgba($color: #FFF, $alpha: 0.7);
				th,
				td {
					font-weight: normal;
					height: 30px;
					;
					border-bottom: 1px dashed #DCDFE6
				}
				.item_cir {
					width: 10px;
					height: 10px;
					border-radius: 50%;
					display: inline-block;
				}
			}
		}
		height: calc(100% - 30px);
		padding: 0 !important;
		.map {
			height: 100%;
			.info_item {
				display: flex;
				font-size: 14px;
				margin: 5px 0;
				.state_online {
					color: #009e00;
				}
				.state_offline {
					color: #8a8a8a;
				}
			}
		}
		.dialog-video {
			width: 100%;
		}
		.overlay_top {
			position: absolute;
			top: 10px;
			width: 100%;
			display: flex;
			justify-content: center;
			.count_wrapper {
				display: flex;
				.count_item {
					width: 20%;
					height: 100%;
					margin: 0 10px;
					.count_label {
						font-size: 25px;
						height: 40px;
						text-align: center;
					}
					.count_value {
						display: flex;
						.number_cell {
							margin: 0 5px;
							padding: 2px 5px;
							font-size: 35px;
							border-radius: 5px;
							background: rgba(170, 170, 170, 0.4);
						}
					}
				}
			}
		}
	}
</style>